<template>
  <div class="view">
    <el-table :data="list">
      <el-table-column
        type="index"
        :index="createIndex"
        label="序号"
        align="center"
        width="80"
      >
      </el-table-column>
      <!--      <el-table-column label="id" align="center" prop="id" />-->
      <!--      <el-table-column label="member_id" align="center" prop="memberId" />-->
      <el-table-column label="改变" align="center" prop="changeCount" />
      <el-table-column label="成长值来源" align="center" prop="sourceType">
        <template #default="scope">
          <dict-tag :options="source_type" :value="scope.row.sourceType" />
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="note" />
      <el-table-column label="时间" align="center" prop="createTime" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { getUserMemberInfo } from "@/api/mall/client/user/growth";
const { proxy } = getCurrentInstance();
const { source_type } = proxy.useDict("source_type");
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const createIndex = (index) => {
  return (
    (queryParams.value.pageNum - 1) * queryParams.value.pageSize + (index + 1)
  );
};
const total = ref(0);
const list = ref([]);
const getList = async () => {
  const res = await getUserMemberInfo(queryParams.value);
  list.value = res.rows;
  total.value = res.total;
};
getList();
</script>

<style scoped>
:deep(.el-pagination) {
  --el-pagination-hover-color: #1aa684;
  --el-color-primary: #1aa684;
}
:deep(.el-select-dropdown__item.selected) {
  color: #1aa684 !important;
}
</style>
